<html lang="en">

<head>
    <meta charset="utf-8" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/web3/dist/web3.min.js"></script>
    <script>
        var account = null;
        var Ballot_Contract = null;
    </script>
    <title>编程语言投票</title>
    <style>
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: xx-large;
        }
    </style>
</head>

<body>
    <div align="center">
        <table>
            <tr>
                <td align='center' colspan="4">
                    <h1>年度最受欢迎语言投票</h1>
                </td>
            </tr>
            <tr>
                <td align='center'>0号</td>
                <td align='center'>1号</td>
                <td align='center'>2号</td>
                <td align='center'>3号</td>
            </tr>
            <tr>
                <td align='center'><img src="img/python.png" width="300" /></button></td>
                <td align='center'><img src="img/java.jpg" width="300" /></button></td>
                <td align='center'><img src="img/cpp.jpg" width="300" /></button></td>
                <td align='center'><img src="img/go.jpg" width="300" /></button></td>
            </tr>
            <tr>
                <td align='center'><button style="font-size: 20px;" onclick="vote(0);">投票</button></td>
                <td align='center'><button style="font-size: 20px;" onclick="vote(1);">投票</button></td>
                <td align='center'><button style="font-size: 20px;" onclick="vote(2);">投票</button></td>
                <td align='center'><button style="font-size: 20px;" onclick="vote(3);">投票</button></td>
            </tr>
            <tr>
                <td colspan="4" style="height: 50;"></td>
            </tr>
            <tr>
                <td align='right'><button style="font-size: 20px;" onclick="reveal();">揭晓结果</button></td>
                <td><span id="result" style="color: red; font-size: 40px;"></span></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td align='right'><button style="font-size: 20px;" onclick="regist();">选民登记</button></td>
                <td align='left' colspan="2">
                    <input id="voter" name="voter" size="70"></input>
                </td>
                <td align='center'>
                    <button style="font-size: 20px;" onclick="stage(2);">开始投票</button>
                    <button style="font-size: 20px;" onclick="stage(3);">结束投票</button>
                </td>
            </tr>
        </table>
    </div>

    <script>
        <!-- web3js网络教程 https://web3js.readthedocs.io/ -->
        function vote(idx) {
            Ballot_Contract.methods.vote(idx).send({ from: account }).on('error', function (error, receipt) {
                console.log(error);
                console.log(receipt);
            });
        };
        function reveal() {
            Ballot_Contract.methods.getWinner().call({ from: account }).then(function (result) {
                console.log(result);
                $('#result').html(result + "号");
            });
        }

        function regist() {
            var addr = document.querySelector("#voter").value;
            if (web3.utils.isAddress(addr)) {
                Ballot_Contract.methods.register(addr).send({ from: account }).on('error', function (error, receipt) {
                    console.log(error);
                    console.log(receipt);
                });
            } else {
                alert("请输入合法的地址");
            }

        }
        function stage(stg) {
            Ballot_Contract.methods.changeState(stg).send({ from: account }).on('error', function (error, receipt) {
                console.log(error);
                console.log(receipt);
            });
        }

        function handleAccountsChanged(accounts) {
            if (accounts.length === 0) {
                console.log('Please connect to MetaMask.');
            } else if (accounts[0] !== account) {
                account = accounts[0];
                console.log("当前账户地址：", account);
            }
        }

        $(document).ready(function () {
            ethereum.request({ method: 'eth_requestAccounts' })
                .then(handleAccountsChanged)
                .catch((err) => {
                    if (err.code === 4001) {
                        console.log('Please connect to MetaMask.');
                    } else {
                        console.error("请先安装Metamask插件或使用其他以太坊钱包");
                    }
                });

            var contractAddress = "0x834B0B07ea77CB17F87719543B82865Ec5D40e82";
            var contractABI = [
                {
                    "inputs": [
                        {
                            "internalType": "uint256",
                            "name": "numProposals",
                            "type": "uint256"
                        }
                    ],
                    "stateMutability": "nonpayable",
                    "type": "constructor"
                },
                {
                    "inputs": [],
                    "name": "state",
                    "outputs": [
                        {
                            "internalType": "enum Ballot.Phase",
                            "name": "",
                            "type": "uint8"
                        }
                    ],
                    "stateMutability": "view",
                    "type": "function",
                    "constant": true
                },
                {
                    "inputs": [
                        {
                            "internalType": "enum Ballot.Phase",
                            "name": "x",
                            "type": "uint8"
                        }
                    ],
                    "name": "changeState",
                    "outputs": [],
                    "stateMutability": "nonpayable",
                    "type": "function"
                },
                {
                    "inputs": [
                        {
                            "internalType": "address",
                            "name": "voter",
                            "type": "address"
                        }
                    ],
                    "name": "register",
                    "outputs": [],
                    "stateMutability": "nonpayable",
                    "type": "function"
                },
                {
                    "inputs": [
                        {
                            "internalType": "uint256",
                            "name": "candidate",
                            "type": "uint256"
                        }
                    ],
                    "name": "vote",
                    "outputs": [],
                    "stateMutability": "nonpayable",
                    "type": "function"
                },
                {
                    "inputs": [],
                    "name": "getWinner",
                    "outputs": [
                        {
                            "internalType": "uint256",
                            "name": "",
                            "type": "uint256"
                        }
                    ],
                    "stateMutability": "view",
                    "type": "function",
                    "constant": true
                }
            ];
            var data = "60806040526000600360006101000a81548160ff021916908360038111156200002d576200002c620001f0565b5b02179055503480156200003f57600080fd5b5060405162000dbc38038062000dbc83398181016040528101906200006591906200025f565b6003811015620000ac576040517f08c379a0000000000000000000000000000000000000000000000000000000008152600401620000a39062000318565b60405180910390fd5b336000806101000a81548173ffffffffffffffffffffffffffffffffffffffff021916908373ffffffffffffffffffffffffffffffffffffffff1602179055506002600160008060009054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1681526020019081526020016000206000018190555060005b81811015620001ba57600260405180602001604052806000815250908060018154018082558091505060019003906000526020600020016000909190919091506000820151816000015550508080620001b19062000369565b91505062000158565b506001600360006101000a81548160ff02191690836003811115620001e457620001e3620001f0565b5b021790555050620003b6565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052602160045260246000fd5b600080fd5b6000819050919050565b620002398162000224565b81146200024557600080fd5b50565b60008151905062000259816200022e565b92915050565b6000602082840312156200027857620002776200021f565b5b6000620002888482850162000248565b91505092915050565b600082825260208201905092915050565b7f63616e64696461746520636f756e742073686f756c64206e6f74206c6573732060008201527f7468616e20746872656500000000000000000000000000000000000000000000602082015250565b600062000300602a8362000291565b91506200030d82620002a2565b604082019050919050565b600060208201905081810360008301526200033381620002f1565b9050919050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052601160045260246000fd5b6000620003768262000224565b91507fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff8203620003ab57620003aa6200033a565b5b600182019050919050565b6109f680620003c66000396000f3fe608060405234801561001057600080fd5b5060043610610074576000357c0100000000000000000000000000000000000000000000000000000000900480630121b93f14610079578063268f1153146100955780634420e486146100b15780638e7ea5b2146100cd578063c19d93fb146100eb575b600080fd5b610093600480360381019061008e91906105ee565b610109565b005b6100af60048036038101906100aa9190610640565b610220565b005b6100cb60048036038101906100c691906106cb565b61031b565b005b6100d56104b3565b6040516100e29190610707565b60405180910390f35b6100f36105a0565b6040516101009190610799565b60405180910390f35b600280600381111561011e5761011d610722565b5b600360009054906101000a900460ff1660038111156101405761013f610722565b5b1461014a57600080fd5b6000600160003373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002090508060010160009054906101000a900460ff16806101af57506002805490508310155b156101b957600080fd5b82816002018190555060018160010160006101000a81548160ff0219169083151502179055508060000154600284815481106101f8576101f76107b4565b5b9060005260206000200160000160008282546102149190610812565b92505081905550505050565b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff163373ffffffffffffffffffffffffffffffffffffffff16146102ae576040517f08c379a00000000000000000000000000000000000000000000000000000000081526004016102a5906108c9565b60405180910390fd5b600360009054906101000a900460ff1660038111156102d0576102cf610722565b5b8160038111156102e3576102e2610722565b5b10156102ee57600080fd5b80600360006101000a81548160ff0219169083600381111561031357610312610722565b5b021790555050565b60018060038111156103305761032f610722565b5b600360009054906101000a900460ff16600381111561035257610351610722565b5b1461035c57600080fd5b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff163373ffffffffffffffffffffffffffffffffffffffff161415806104035750600160008373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060010160009054906101000a900460ff165b1561040d57600080fd5b60018060008473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff168152602001908152602001600020600001819055506000600160008473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200190815260200160002060010160006101000a81548160ff0219169083151502179055505050565b600060038060038111156104ca576104c9610722565b5b600360009054906101000a900460ff1660038111156104ec576104eb610722565b5b146104f657600080fd5b600080600280549050905060005b600280549050811015610575578260028281548110610526576105256107b4565b5b90600052602060002001600001541115610562576002818154811061054e5761054d6107b4565b5b906000526020600020016000015492508091505b808061056d906108e9565b915050610504565b50600280805490506105879190610960565b82101561059757610596610991565b5b80935050505090565b600360009054906101000a900460ff1681565b600080fd5b6000819050919050565b6105cb816105b8565b81146105d657600080fd5b50565b6000813590506105e8816105c2565b92915050565b600060208284031215610604576106036105b3565b5b6000610612848285016105d9565b91505092915050565b6004811061062857600080fd5b50565b60008135905061063a8161061b565b92915050565b600060208284031215610656576106556105b3565b5b60006106648482850161062b565b91505092915050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b60006106988261066d565b9050919050565b6106a88161068d565b81146106b357600080fd5b50565b6000813590506106c58161069f565b92915050565b6000602082840312156106e1576106e06105b3565b5b60006106ef848285016106b6565b91505092915050565b610701816105b8565b82525050565b600060208201905061071c60008301846106f8565b92915050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052602160045260246000fd5b6004811061076257610761610722565b5b50565b600081905061077382610751565b919050565b600061078382610765565b9050919050565b61079381610778565b82525050565b60006020820190506107ae600083018461078a565b92915050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052603260045260246000fd5b7f4e487b7100000000000000000000000000000000000000000000000000000000600052601160045260246000fd5b600061081d826105b8565b9150610828836105b8565b92508282019050808211156108405761083f6107e3565b5b92915050565b600082825260208201905092915050565b7f6f6e6c79206368616972506572736f6e2063616e206368616e6765207374617460008201527f6500000000000000000000000000000000000000000000000000000000000000602082015250565b60006108b3602183610846565b91506108be82610857565b604082019050919050565b600060208201905081810360008301526108e2816108a6565b9050919050565b60006108f4826105b8565b91507fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff8203610926576109256107e3565b5b600182019050919050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052601260045260246000fd5b600061096b826105b8565b9150610976836105b8565b92508261098657610985610931565b5b828204905092915050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052600160045260246000fdfea264697066735822122056dd5de967f30d4d29f4c79b15ddc942607ed0d2ee743d55434a0273530ed95964736f6c63430008150033";

            if (typeof web3 !== 'undefined') {
                web3 = new Web3(ethereum);
            } else {
                console.error("请先安装Metamask插件或使用其他以太坊钱包");
            }
            Ballot_Contract = new web3.eth.Contract(contractABI, contractAddress);
            Ballot_Contract.options.data = data;
        });
    </script>
</body>